React createPortal: Bemästra skapandet av portaler och händelsehantering

I modern webbutveckling med React är det avgörande att skapa användargränssnitt som sömlöst integreras med den underliggande dokumentstrukturen. Medan Reacts komponentmodell är utmärkt för att hantera den virtuella DOM-trädet, behöver vi ibland rendera element utanför den normala komponenthierarkin. Det är här createPortal kommer in. Denna guide utforskar createPortal på djupet och täcker dess syfte, användning och avancerade tekniker för att hantera händelser och bygga komplexa UI-element. Vi kommer att behandla överväganden kring internationalisering, bästa praxis för tillgänglighet och vanliga fallgropar att undvika.

Vad är React createPortal?

createPortal är ett React API som låter dig rendera en React-komponents barn till en annan del av DOM-trädet, utanför den överordnade komponentens hierarki. Detta är särskilt användbart för att skapa element som modaler, verktygstips, rullgardinsmenyer och överlägg som behöver positioneras på den översta nivån i dokumentet eller inom en specifik behållare, oavsett var komponenten som utlöser dem finns i Reacts komponentträd.

Utan createPortal skulle detta ofta innebära komplexa lösningar som att manipulera DOM direkt eller använda CSS absolut positionering, vilket kan leda till problem med staplingskontexter, z-index-konflikter och tillgänglighet.

Varför använda createPortal?

Här är de främsta anledningarna till varför createPortal är ett värdefullt verktyg i din React-arsenal:

• Förbättrad DOM-struktur: Undviker att nästla komponenter djupt i DOM, vilket leder till en renare och mer hanterbar struktur. Detta är särskilt viktigt för komplexa applikationer med många interaktiva element.
• Förenklad styling: Positionera enkelt element relativt till visningsområdet eller specifika behållare utan att förlita sig på komplexa CSS-trick. Detta förenklar styling och layout, särskilt när man hanterar element som behöver ligga över annat innehåll.
• Förbättrad tillgänglighet: Underlättar skapandet av tillgängliga användargränssnitt genom att låta dig hantera fokus och tangentbordsnavigering oberoende av komponenthierarkin. Till exempel, att säkerställa att fokus stannar inom ett modalfönster.
• Bättre händelsehantering: Låter händelser propagera korrekt från portalens innehåll till React-trädet, vilket säkerställer att händelselyssnare kopplade till överordnade komponenter fortfarande fungerar som förväntat.

Grundläggande användning av createPortal

createPortal-API:et accepterar två argument:

1. React-noden (JSX) du vill rendera.
2. DOM-elementet där du vill rendera noden. Detta DOM-element bör helst existera innan komponenten som använder createPortal monteras.

Här är ett enkelt exempel:

Exempel: Rendera en modal

Låt oss säga att du har en modalkomponent som du vill rendera i slutet av body-elementet.

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a <div id="modal-root"></div> in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

            

              
                Copy
              
            
          

Förklaring:

• Vi importerar ReactDOM eftersom createPortal är en metod i ReactDOM-objektet.
• Vi antar att det finns ett DOM-element med ID:t modal-root i din HTML. Det är här modalen kommer att renderas. Se till att detta element existerar. En vanlig praxis är att lägga till en <div id="modal-root"></div> precis före den avslutande </body>-taggen i din index.html-fil.
• Vi använder ReactDOM.createPortal för att rendera modalens JSX i modalRoot-elementet.
• Vi använder e.stopPropagation() för att förhindra att onClick-händelsen på modalfönstrets innehåll utlöser onClose-hanteraren på överlägget. Detta säkerställer att ett klick inuti modalen inte stänger den.

Användning:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Detta exempel visar hur man renderar en modal utanför den normala komponenthierarkin, vilket gör att du kan positionera den absolut på sidan. Att använda createPortal på detta sätt löser vanliga problem med staplingskontexter och gör det enkelt att skapa konsekvent modal-styling i hela din applikation.

Händelsehantering med createPortal

En av de viktigaste fördelarna med createPortal är att den bevarar det normala händelsebubblingsbeteendet i React. Detta innebär att händelser som har sitt ursprung i portalens innehåll fortfarande kommer att propagera upp i Reacts komponentträd, vilket gör att överordnade komponenter kan hantera dem.

Det är dock viktigt att förstå hur händelser hanteras när de korsar portalgränsen.

Exempel: Hantera händelser utanför portalen

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

Förklaring:

• Vi använder en ref för att få tillgång till rullgardinsmenyn som renderas inuti portalen.
• Vi lägger till en mousedown-händelselyssnare på document för att upptäcka klick utanför rullgardinsmenyn.
• Inuti händelselyssnaren kontrollerar vi om klicket inträffade utanför rullgardinsmenyn med hjälp av dropdownRef.current.contains(event.target).
• Om klicket inträffade utanför rullgardinsmenyn stänger vi den genom att sätta isOpen till false.

Detta exempel visar hur man hanterar händelser som inträffar utanför portalens innehåll, vilket gör att du kan skapa interaktiva element som svarar på användarens handlingar i det omgivande dokumentet.

Avancerade användningsfall

createPortal är inte begränsat till enkla modaler och verktygstips. Det kan användas i olika avancerade scenarier, inklusive:

• Snabbmenyer: Rendera dynamiskt snabbmenyer nära muspekaren vid högerklick.
• Notiser: Visa notiser högst upp på skärmen, oavsett komponenthierarkin.
• Anpassade popovers: Skapa anpassade popover-komponenter med avancerad positionering och styling.
• Integration med tredjepartsbibliotek: Använd createPortal för att integrera React-komponenter med tredjepartsbibliotek som kräver specifika DOM-strukturer.

Exempel: Skapa en snabbmeny

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

Förklaring:

• Vi använder onContextMenu-händelsen för att upptäcka högerklick på målelementet.
• Vi förhindrar att den vanliga snabbmenyn visas med hjälp av event.preventDefault().
• Vi lagrar musens koordinater i tillståndsvariabeln contextMenu.
• Vi renderar snabbmenyn inuti en portal, positionerad vid musens koordinater.
• Vi inkluderar samma logik för att upptäcka klick utanför som i föregående exempel för att stänga snabbmenyn när användaren klickar utanför den.

Tillgänglighetsaspekter

När du använder createPortal är det avgörande att tänka på tillgänglighet för att säkerställa att din applikation är användbar för alla.

Fokushantering

När en portal öppnas (t.ex. en modal), bör du se till att fokus automatiskt flyttas till det första interaktiva elementet inuti portalen. Detta hjälper användare som navigerar med tangentbord eller skärmläsare att enkelt komma åt portalens innehåll.

När portalen stängs bör du återställa fokus till elementet som utlöste portalens öppnande. Detta upprätthåller ett konsekvent navigeringsflöde.

ARIA-attribut

Använd ARIA-attribut för att ge semantisk information om portalens innehåll. Använd till exempel aria-modal="true" på modalelementet för att indikera att det är en modal dialogruta. Använd aria-labelledby för att associera modalen med dess titel, och aria-describedby för att associera den med dess beskrivning.

Tangentbordsnavigering

Se till att användare kan navigera i portalens innehåll med tangentbordet. Använd tabindex-attributet för att kontrollera fokusordningen och se till att alla interaktiva element är nåbara med tangentbordet.

Överväg att fånga fokus inuti portalen så att användare inte av misstag kan navigera utanför den. Detta kan uppnås genom att lyssna på Tab-tangenten och programmatiskt flytta fokus till det första eller sista interaktiva elementet inuti portalen.

Exempel: Tillgänglig modal

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

Förklaring:

• Vi använder ARIA-attribut som aria-modal, aria-labelledby och aria-describedby för att ge semantisk information om modalen.
• Vi använder useEffect-hooken för att hantera fokus när modalen öppnas och stängs.
• Vi sparar det element som hade fokus innan modalen öppnades och återställer fokus till det när modalen stängs.
• Vi fångar fokus inuti modalen med hjälp av en keydown-händelselyssnare.

Överväganden kring internationalisering (i18n)

När man utvecklar applikationer för en global publik är internationalisering (i18n) en kritisk faktor. När du använder createPortal finns det några saker att tänka på:

• Textriktning (RTL/LTR): Se till att din styling hanterar både vänster-till-höger (LTR) och höger-till-vänster (RTL) språk. Detta kan innebära att använda logiska egenskaper i CSS (t.ex. margin-inline-start istället för margin-left) och att korrekt sätta dir-attributet på HTML-elementet.
• Lokalisering av innehåll: All text inom portalen bör lokaliseras till användarens föredragna språk. Använd ett i18n-bibliotek (t.ex. react-intl, i18next) för att hantera översättningar.
• Formatering av nummer och datum: Formatera nummer och datum enligt användarens locale. Intl-API:et tillhandahåller funktioner för detta.
• Kulturella konventioner: Var medveten om kulturella konventioner relaterade till UI-element. Till exempel kan knapplacering skilja sig mellan kulturer.

Exempel: i18n med react-intl

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

FormattedMessage-komponenten från react-intl hämtar det översatta meddelandet baserat på användarens locale. Konfigurera react-intl med dina översättningar för olika språk.

Vanliga fallgropar och lösningar

Även om createPortal är ett kraftfullt verktyg är det viktigt att vara medveten om några vanliga fallgropar och hur man undviker dem:

• Saknat rot-element för portalen: Se till att DOM-elementet du använder som portalens rot existerar innan komponenten som använder createPortal monteras. En god praxis är att placera det direkt i index.html.
• Z-index-konflikter: Var uppmärksam på z-index-värden när du positionerar element med createPortal. Använd CSS för att hantera staplingskontexter och se till att din portals innehåll visas korrekt.
• Problem med händelsehantering: Förstå hur händelser propagerar genom portalen och hantera dem på lämpligt sätt. Använd e.stopPropagation() för att förhindra att händelser utlöser oavsiktliga handlingar.
• Minnesläckor: Städa upp händelselyssnare och referenser korrekt när komponenten som använder createPortal avmonteras för att undvika minnesläckor. Använd useEffect-hooken med en cleanup-funktion för att uppnå detta.
• Oväntade problem med scrollning: Portaler kan ibland störa det förväntade scrollningsbeteendet på sidan. Se till att dina stilar inte förhindrar scrollning och att modala element inte orsakar sidhopp eller oväntat scrollningsbeteende när de öppnas och stängs.

Slutsats

React.createPortal är ett värdefullt verktyg för att skapa flexibla, tillgängliga och underhållbara användargränssnitt i React. Genom att förstå dess syfte, användning och avancerade tekniker för att hantera händelser och tillgänglighet kan du utnyttja dess kraft för att bygga komplexa och engagerande webbapplikationer som ger en överlägsen användarupplevelse för en global publik. Kom ihåg att ta hänsyn till bästa praxis för internationalisering och tillgänglighet för att säkerställa att dina applikationer är inkluderande och användbara för alla.

Genom att följa riktlinjerna och exemplen i denna guide kan du med självförtroende använda createPortal för att lösa vanliga UI-utmaningar och skapa fantastiska webbupplevelser.